<template>
	<!-- <div class="alert alert-info">
        <h1 class="alert alert-info">我的订单</h1>
        <ul>
			<li>
				<div class="oneOrder">
					<div class="head">订单号</div>
					<div class="head">商品编号</div>
					<div class="head">订单备注</div>
				</div>
			</li>
            <li v-for="(order,index) in orders" :key=index>
				<div class="oneOrder">
					<div class="item">{{order.oid}}</div>
					<div class="item">{{order.gid}}</div>
					<div class="item">{{order.orderInf}}</div>
				</div>
			</li>
        </ul>
    </div> -->
	<el-table :data="orders" border style="width: 100%">
		<el-table-column prop="oid" label="订单编号" width="180">
		</el-table-column>
		<el-table-column prop="gid" label="商品编号" width="180">
		</el-table-column>
		<el-table-column prop="orderInf" label="订单备注">
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		name: 'orderList',
		data() {
			return {
				orders: [],
			}
		},
		created() {
			console.log(this.$store.state.user);
			const config = {
				method: 'post',
				url: 'http://localhost:8080/json/order/orderList',
				data: this.$store.state.user
			}
			// 默认get请求
			this.$axios(config).then(result => {
				console.log(result.data);
				this.orders = result.data;
			})
		}
	}
</script>

<style scoped>
	@import '../assets/css/zui.css';

	li {
		list-style-type: none;
	}

	.oneOrder {
		border-bottom: 1px solid #C0C0C0;
		display: flex;
	}

	.item {
		width: 50%;
	}

	.head {
		width: 50%;
		font-weight: bold;
		font-size: 17px;
	}
</style>
